<template>
    <section >
        <el-table
                :data="adDatas" border  stripe highlight-current-row class="ad-post-table"
                style="width: 100%">
            <el-table-column
                    width="120" label="广告系列名称" prop="name">
            </el-table-column>
            <el-table-column
                    width="120" label="广告组名" prop="groupName">
            </el-table-column>
            <el-table-column width="160" label="受众" >
                <template scope="scope">
                    <ul>
                        <li v-if="scope.row.audience.location">
                            <span>位置</span>：<span>{{scope.row.audience.location}}</span>
                        </li>
                        <li v-if="scope.row.audience.language">
                            <span>语言</span>：<span>{{scope.row.audience.language}}</span>
                        </li>
                        <li v-if="scope.row.audience.sex">
                            <span>性别</span>：<span>{{scope.row.audience.sex}}</span>
                        </li>
                        <li v-if="scope.row.audience.age">
                            <span>年龄</span>：<span>{{scope.row.audience.age}}</span>
                        </li>
                        <li v-if="scope.row.audience.subdivisionLocation">
                            <span>细分定位</span>：<span>{{scope.row.audience.subdivisionLocation}}</span>
                        </li>
                        <li v-if="scope.row.audience.version">
                            <span>版位</span>：<span>{{scope.row.audience.version}}</span>
                        </li>
                        <li v-if="scope.row.audience.relation">
                            <span>关系</span>：<span>{{scope.row.audience.relation}}</span>
                        </li>
                    </ul>
                </template>
            </el-table-column>
            <el-table-column width="200"  label="广告">
                <template scope="scope">
                    <div class="adp-detail-wraper">
                        <h3 class="adp-detail-title">{{scope.row.ad.title}}</h3>
                        <div class="adp-detail-state">{{scope.row.ad.state}}</div>
                        <div class="adp-detail-state">{{scope.row.ad.link}}</div>
                        <el-button v-if="scope.row.ad.actionCall != '' && scope.row.ad.actionCall != '无按钮'" :plain="true">{{scope.row.ad.actionCall}}</el-button>
                        <img :src="scope.row.ad.src" width="60px" alt="img">
                    </div>
                </template>
            </el-table-column>
            <el-table-column width="120" label="预算（￥）" >
                <template scope="scope">
                    <div>{{scope.row.bs.budgetType}}</div>
                    <div>￥{{scope.row.bs.budgetLimit.toFixed(2)}}</div>
                </template>
            </el-table-column>
            <el-table-column
                    width="100" label="排期" prop="bs.schedule">
            </el-table-column>
            <el-table-column
                    width="100" label="优化方式" prop="bs.optimizeWays">
            </el-table-column>
            <el-table-column
                    width="100" label="竞价" prop="bs.bidAmount">
            </el-table-column>
            <el-table-column
                    width="100" label="收费方式" prop="bs.chargeType">
            </el-table-column>
        </el-table>
        <div class="adp-btn-group">
            <el-button >存为草稿</el-button>
            <el-button type="primary">发布广告</el-button>
        </div>
    </section>
</template>

<script>
    import Vue from 'vue'
    import { Row,Col,Button,Table,TableColumn } from 'element-ui'
    import { mapGetters, mapMutations ,mapActions} from 'vuex';

    Vue.use(Row)
    Vue.use(Col)
    Vue.use(Button)
    Vue.use(Table)
    Vue.use(TableColumn)

    export default {
        data () {
            return {
                adDatas: []
            }
        },
        computed: {
            ...mapGetters([
                'adverName',
                'adverPlan',
                'budgetSchedule',
                'adCreate',
                'editAudienceForm'
            ]),
        },
        methods: {
            jointArrayValue(arr) {
                let len = arr.length;
                let str = ''
                for(let i=0;i<len;i++){
                    str += arr[i].value + '、'
                }
                str = str.slice(0,str.length-1)
                return str
            },
            dealAdData() {
                let data = {
                    name: '',
                    groupName: '',
                    audience: {
                        location: 'new york',
                        language: 'chinese',
                        sex: this.editAudienceForm.gender,
                        age: '',
                        subdivisionLocation: '大学毕业且包括喜欢购物',
                        version: 'FB-桌面版',
                        relation: '赞过主页的人'
                    },
                    bs: {
                        budgetType: this.budgetSchedule.budgetType,
                        budgetLimit: this.budgetSchedule.budgetLimit,
                        schedule: this.budgetSchedule.schedule,
                        optimizeWays: this.budgetSchedule.optimizeWays,
                        bidAmount: this.budgetSchedule.bidAmount,
                        chargeType: this.budgetSchedule.chargeType
                    }

                };
                data.audience.location = this.jointArrayValue(this.editAudienceForm.addr.include);
                data.audience.age = this.editAudienceForm.age.start + '-' + this.editAudienceForm.age.end;
                if(this.adCreate.adForm === 'video'){   //视频
                    data.ad.title = this.adCreate.videoInfo.title;
                    data.ad.state = this.adCreate.videoInfo.state;
                    data.ad.link = this.adCreate.videoInfo.link;
                    data.ad.actionCall = this.adCreate.videoInfo.actionCall;
                    data.ad.src = this.adCreate.videoInfo.src;
                    this.adDatas.push(data)
                }
                else if(this.adCreate.adForm === 'image' && !this.adCreate.isCarousel){    //单图片
                    let len = this.adCreate.uploadImages.length;
                    let obj = {};
                    for (let i=0;i<len;i++) {
                        obj['data'+i] = {};
                        obj['data'+i].name = '';
                        obj['data'+i].groupName = '';
                        obj['data'+i].audience = data.audience;
                        obj['data'+i].bs = data.bs;
                        obj['data'+i].ad = {};
                        obj['data'+i].ad.title = this.adCreate.imageInfo[i].title;
                        obj['data'+i].ad.state = this.adCreate.imageInfo[i].state;
                        obj['data'+i].ad.link = this.adCreate.imageInfo[i].link;
                        obj['data'+i].ad.actionCall = this.adCreate.imageInfo[i].actionCall;
                        obj['data'+i].ad.src = this.adCreate.uploadImages[i];
                        this.adDatas.push(obj['data'+i])
                    }
                }
                else{   //轮播
                    data.ad.title = this.adCreate.imageInfo[0].title;
                    data.ad.state = this.adCreate.imageInfo[0].state;
                    data.ad.link = this.adCreate.imageInfo[0].link;
                    data.ad.actionCall = this.adCreate.imageInfo[0].actionCall;
                    data.ad.src = this.adCreate.uploadImages[0].src;
                    this.adDatas.push(data)
                }
                this.adDatas[0].name = this.adverName;
                this.adDatas[0].groupName = this.budgetSchedule.adsName
            }
        },
        created () {
            this.dealAdData()
        }
    }
</script>

<style lang="scss">
    .ad-post-table.el-table td .cell{
        height: 100%;
        padding-top: 15px;
        padding-bottom: 15px;
    }
</style>
<style lang="scss" scoped>
    ul,li{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    div,ul,li,span{
        color: #666;
    }
    .adp-detail-wraper{
        position: relative;
        padding-left: 68px;
        font-size: 13px;
        color: #666;
        img{
            position: absolute;
            left: 0;
            top:0;
            max-width: 65px;
            height: auto;
        }
        button{
            width: 84px;
            height: 28px;
            margin-top: 8px;
            padding: 4px;
            border-radius: 28px;
            border-color: #d5dfe4;
            color: #666;
            font-size: 13px;
        }
    }
    .adp-detail-title{
        margin: 0;
        font-size: 15px;
    }
    .adp-detail-state{
        margin-top: 6px;
        line-height: 16px;
    }
    .adp-btn-group{
        text-align: right;
        font-size: 12px;
        padding: 18px 10px 38px;
        button{
            width: 120px;
            height: 34px;
            border-radius: 34px;
            &:last-child{
                 border-color: #ffb100;
                 color: white;
                 background-color: #ffb100;
             }
        }
    }
    .ad-post-audience{
        padding: 10px 0;
    }
</style>
